<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>概述 | Sass中文文档</title>
    <meta name="description" content="Sass是世界上最成熟、稳定、强大的专业级CSS扩展语言">
    <meta name="keywords" content="Sass,Sass教程,Sass中国,Sass中文,Sass文档,SCSS,SCSS教程,SCSS中国,SCSS中文,SCSS文档,CSS预处理">
  <link rel="icon" href="/sass-cn/images/favicon.ico" preload="true" as="image">
    
    <link rel="preload" href="/sass-cn/assets/css/0.styles.2d6686da.css" as="style"><link rel="preload" href="/sass-cn/assets/js/app.deb571aa.js" as="script"><link rel="preload" href="/sass-cn/assets/js/layout-layout.f021cffe.js" as="script"><link rel="preload" href="/sass-cn/assets/js/vendors~layout-layout.096dd481.js" as="script"><link rel="preload" href="/sass-cn/assets/js/page-api-modules-readme.725f2037.js" as="script"><link rel="preload" href="/sass-cn/assets/js/87.34d80629.js" as="script"><link rel="preload" href="/sass-cn/assets/js/93.6bc9799b.js" as="script"><link rel="prefetch" href="/sass-cn/assets/js/86.f407d520.js"><link rel="prefetch" href="/sass-cn/assets/js/88.7da6d807.js"><link rel="prefetch" href="/sass-cn/assets/js/89.c6220562.js"><link rel="prefetch" href="/sass-cn/assets/js/90.9b5a2114.js"><link rel="prefetch" href="/sass-cn/assets/js/91.bd6167c2.js"><link rel="prefetch" href="/sass-cn/assets/js/92.339ec357.js"><link rel="prefetch" href="/sass-cn/assets/js/94.322094fc.js"><link rel="prefetch" href="/sass-cn/assets/js/95.376dbcc7.js"><link rel="prefetch" href="/sass-cn/assets/js/96.ab69b324.js"><link rel="prefetch" href="/sass-cn/assets/js/layout-notfound.626e4f7c.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-atroot.32ef08ae.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-debug.06148e5a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-error.29586dbb.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-extend.cb5a5d75.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-each.4393ee83.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-for.cb8126b0.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-ifandelse.bc133ead.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-readme.208a4bd0.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-flow-while.b671cb7c.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-formcss.6b9bf244.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-forward.84e92434.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-function.92dd9149.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-import.1caa72ed.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-mixinandinclude.317a55a5.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-readme.488e2ba3.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-use.389e0385.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-atrules-warn.2f405d31.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-breakchanges-compoundselectors.a819b0fe.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-breakchanges-readme.bd231221.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-breakchanges-variablesyntax.5a5f2d19.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-commandline-dart.48bed8a2.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-commandline-readme.07ce98e9.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-commandline-ruby.8eaf4b85.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-colors.0e3e5304.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-introspection.ada8df60.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-lists.a4895d0e.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-maps.45a902b5.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-numbers.c8f4b6cc.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-plain.fef59f4c.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-readme.541e96b9.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-selectors.38c993bc.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-functions-strings.175e953b.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-interpolation.c1b3ae69.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-jsapi.a56000a6.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-color.8963ea84.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-list.10a115ab.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-map.e0491724.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-math.0fa1c600.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-meta.0db00faa.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-selector.277cf2d4.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-modules-string.f885bb86.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-boolean.8989e7df.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-equality.f9f7f23a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-numeric.99a7bdba.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-readme.652142ed.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-relational.0d200de4.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-operators-string.856849c0.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-readme.4d32e79b.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-parentselector.ec3b0a60.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-placeholderselectors.02d3d2d8.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-propertydeclarations.c36f8cc8.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-stylerules-readme.0e7410e6.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-comments.96ee19bd.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-functions.ea6a9af7.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-parsing.b904a6f4.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-readme.73283f3d.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-syntax-structure.3ae5c00a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-booleans.fe9e9754.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-colors.e2ba3180.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-functions.3c5f60ca.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-lists.c9668494.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-maps.e77a0fb7.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-null.93ac8da1.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-numbers.3976f2f1.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-readme.94af6f11.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-values-strings.2570f03f.js"><link rel="prefetch" href="/sass-cn/assets/js/page-api-variables.2b768950.js"><link rel="prefetch" href="/sass-cn/assets/js/page-code.04c89951.js"><link rel="prefetch" href="/sass-cn/assets/js/page-contact.31a84f81.js"><link rel="prefetch" href="/sass-cn/assets/js/page-install-readme.48b75800.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-extend.93e31b0d.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-import.d9dfee8b.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-mixins.bb4b5fc6.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-nesting.1fcb2b18.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-operators.b089064a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-partials.516dba99.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-preprocessing.8a2f2124.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-readme.2a880d8a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-learn-variables.cc64042a.js"><link rel="prefetch" href="/sass-cn/assets/js/page-readme.6924f94e.js">
    <link rel="stylesheet" href="/sass-cn/assets/css/0.styles.2d6686da.css">
    <meta name="baidu-site-verification" content="HISWYjeJhP">
    <meta name="google-site-verification" content="o-XFzkWKa1fqZMPS6L8cuu7-UCoqTSWKhk-tZAdIW9E">
    <script>var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0e27eeb01c53bbd49dcc535da62d57ac"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s) })();</script>
</head>

<body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/sass-cn/" class="home-link router-link-active"><!----> <span class="site-name">Sass中文文档</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/sass-cn/install/" class="nav-link">安装</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">学习指南</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Preprocessing.html" class="nav-link">预处理</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Nesting.html" class="nav-link">嵌套规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Partials.html" class="nav-link">片段文件</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Import.html" class="nav-link">文件导入</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Mixins.html" class="nav-link">混合器</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Extend.html" class="nav-link">扩展和继承</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Operators.html" class="nav-link">操作符</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/api/Syntax/" class="nav-link">语法</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/StyleRules/" class="nav-link">样式规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Interpolation.html" class="nav-link">插值</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/AtRules/" class="nav-link">AtRules</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Values/" class="nav-link">值类型</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Operators/" class="nav-link">操作符</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Modules/" class="nav-link router-link-exact-active router-link-active">内置模块</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/BreakChanges/" class="nav-link">重大改变</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/CommandLine/" class="nav-link">命令行</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/JsApi/" class="nav-link">JavaScript API</a></li></ul></div></div><div class="nav-item"><a href="https://sass-lang.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  英文官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="/sass-cn/Contact.html" class="nav-link">Contact</a></div> <a href="https://github.com/zongyang/sass-cn" target="_blank" rel="noopener noreferrer" class="repo-link">
    源码
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/sass-cn/install/" class="nav-link">安装</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">学习指南</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Preprocessing.html" class="nav-link">预处理</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Nesting.html" class="nav-link">嵌套规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Partials.html" class="nav-link">片段文件</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Import.html" class="nav-link">文件导入</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Mixins.html" class="nav-link">混合器</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Extend.html" class="nav-link">扩展和继承</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/learn/Operators.html" class="nav-link">操作符</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">文档</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sass-cn/api/Syntax/" class="nav-link">语法</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/StyleRules/" class="nav-link">样式规则</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Variables.html" class="nav-link">变量</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Interpolation.html" class="nav-link">插值</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/AtRules/" class="nav-link">AtRules</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Values/" class="nav-link">值类型</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Operators/" class="nav-link">操作符</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/Modules/" class="nav-link router-link-exact-active router-link-active">内置模块</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/BreakChanges/" class="nav-link">重大改变</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/CommandLine/" class="nav-link">命令行</a></li><li class="dropdown-item"><!----> <a href="/sass-cn/api/JsApi/" class="nav-link">JavaScript API</a></li></ul></div></div><div class="nav-item"><a href="https://sass-lang.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  英文官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="/sass-cn/Contact.html" class="nav-link">Contact</a></div> <a href="https://github.com/zongyang/sass-cn" target="_blank" rel="noopener noreferrer" class="repo-link">
    源码
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <div style="padding:1rem 0;"><script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins data-ad-client="ca-pub-6227283216337087" data-ad-slot="1743359721" class="adsbygoogle" style="display:inline-block;width:260px;height:120px"></ins> <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script></div> <ul class="sidebar-links"><li><a href="/sass-cn/install/" class="sidebar-link">安装</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>学习指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sass-cn/learn/" class="sidebar-link">基础知识</a></li><li><a href="/sass-cn/learn/Preprocessing.html" class="sidebar-link">预处理</a></li><li><a href="/sass-cn/learn/Variables.html" class="sidebar-link">变量</a></li><li><a href="/sass-cn/learn/Nesting.html" class="sidebar-link">嵌套规则</a></li><li><a href="/sass-cn/learn/Partials.html" class="sidebar-link">片段文件</a></li><li><a href="/sass-cn/learn/Import.html" class="sidebar-link">文件导入</a></li><li><a href="/sass-cn/learn/Mixins.html" class="sidebar-link">混合器</a></li><li><a href="/sass-cn/learn/Extend.html" class="sidebar-link">扩展与继承</a></li><li><a href="/sass-cn/learn/Operators.html" class="sidebar-link">操作符</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>文档</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sass-cn/api/" class="sidebar-link">综述</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>语法</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>样式规则</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/sass-cn/api/Variables.html" class="sidebar-link">变量</a></li><li><a href="/sass-cn/api/Interpolation.html" class="sidebar-link">插值</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>@规则</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>值类型</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>操作符</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>内置模块</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sass-cn/api/Modules/" class="active sidebar-link">概述</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/sass-cn/api/Modules/#全局函数" class="sidebar-link">全局函数</a></li></ul></li><li><a href="/sass-cn/api/Modules/Color.html" class="sidebar-link">sass:color</a></li><li><a href="/sass-cn/api/Modules/List.html" class="sidebar-link">sass:list</a></li><li><a href="/sass-cn/api/Modules/Map.html" class="sidebar-link">sass:map</a></li><li><a href="/sass-cn/api/Modules/Math.html" class="sidebar-link">sass:math</a></li><li><a href="/sass-cn/api/Modules/Meta.html" class="sidebar-link">sass:meta</a></li><li><a href="/sass-cn/api/Modules/Selector.html" class="sidebar-link">sass:selector</a></li><li><a href="/sass-cn/api/Modules/String.html" class="sidebar-link">sass:string</a></li></ul></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>重大改变</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>命令行</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/sass-cn/api/JsApi.html" class="sidebar-link">JavaScript API</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="概述"><a href="#概述" aria-hidden="true" class="header-anchor">#</a> 概述</h1> <div><script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins data-ad-client="ca-pub-6227283216337087" data-ad-slot="9720145993" class="adsbygoogle" style="display:inline-block;width:600px;height:90px"></ins> <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script></div> <p>Sass提供了许多内置的模块，这些模块包含很有用的函数（以及偶尔的mixin）。这些模块可以像用户自定义的样式表一样使用<a href="">@use</a>规则加载，并且可以像调用<a href="%E5%BE%85%E7%A1%AE%E5%AE%9A">其它模块成员</a>一样调用它们的函数。所有内置模块URL都以<code>sass:</code>开头,表示它们是Sass本身的一部分。</p> <div class="warning custom-block"><p>在引入Sass模块系统之前，所有Sass函数任何时候都是全局的。许多函数仍然有全局别名（在它们的文档中列出了这些别名）。Sass团队不鼓励使用它们，并最终将弃用它们，但目前它们仍然可以与旧的Sass版本和LibSass（后者还不支持模块系统）兼容。</p> <p>在新的模块系统中，也只有<a href="">少数函数</a>是全局可用的，这可能是因为它们具有特殊的计算行为（<a href="%E5%BE%85%E7%A1%AE%E5%AE%9A">if()</a>），也可能是因为它们在顶层的内置CSS函数（<a href="%E5%BE%85%E7%A1%AE%E5%AE%9A">rgb()</a>和<a href="%E5%BE%85%E7%A1%AE%E5%AE%9A">hsl()</a>）上添加了额外的行为。这些不会被弃用，可以自由使用。</p></div> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token atrule"><span class="token rule">@use</span> <span class="token string">&quot;sass:color&quot;</span><span class="token punctuation">;</span>

.button</span> <span class="token punctuation">{</span>
  <span class="token property"><span class="token variable">$primary-color</span></span><span class="token punctuation">:</span> #6b717f<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$primary-color</span><span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid color.<span class="token function">scale</span><span class="token punctuation">(</span><span class="token variable">$primary-color</span><span class="token punctuation">,</span> <span class="token property"><span class="token variable">$lightness</span></span><span class="token punctuation">:</span> 20%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@use</span> &quot;sass:color&quot;</span>

<span class="token selector">.button</span>
<span class="token variable-line">  <span class="token variable">$primary-color</span><span class="token punctuation">:</span> #6b717f</span>
<span class="token property-line">  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$primary-color</span></span>
<span class="token property-line">  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid color.scale(<span class="token variable">$primary-color</span>, <span class="token property">$lightness</span><span class="token punctuation">:</span> 20<span class="token operator">%</span>)</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.button</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #6b717f<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #878d9a<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div></div></div> <p>Sass提供以下内置模块:</p> <ul><li><a href="/api/Modules/Math">sass:math模块</a>提供对<a href="/api/Values/Numbers">数字</a>进行操作的函数。</li> <li><a href="/api/Modules/String">sass:string模块</a>使组合、搜索或拆分<a href="/api/Values/Strings">字符串</a>变得很容易。</li> <li><a href="/api/Modules/Color">sass:color模块</a>根据现有的颜色生成新的<a href="/api/Values/Colors">颜色</a>，使得构建颜色主题变得很容易。</li> <li><a href="/api/Modules/List">sass:list模块</a>允许您访问和修改<a href="/api/Values/Lists">列表</a>中的值。</li> <li><a href="/api/Modules/Map">sass:map模块</a>使查找与<a href="/api/Values/Maps">映射</a>中的键关联的值成为可能，并且还有更多功能。</li> <li><a href="/api/Modules/Selector">sass:selector模块</a>提供对强大的Sass选择器引擎的访问方法。</li> <li><a href="/api/Modules/Meta">sass:meta模块</a>暴露了sass内部工作的细节。</li></ul> <h2 id="全局函数"><a href="#全局函数" aria-hidden="true" class="header-anchor">#</a> 全局函数</h2> <h3 id="hsl"><a href="#hsl" aria-hidden="true" class="header-anchor">#</a> hsl</h3> <ul><li><p><strong>包含函数：</strong></p> <ul><li><code>hsl($hue $saturation $lightness)</code></li> <li><code>hsl($hue $saturation $lightness / $alpha)</code></li> <li><code>hsl($hue, $saturation, $lightness, $alpha: 1)</code></li> <li><code>hsla($hue $saturation $lightness)</code></li> <li><code>hsla($hue $saturation $lightness / $alpha)</code></li> <li><code>hsla($hue, $saturation, $lightness, $alpha: 1)</code></li></ul></li> <li><p><strong>返回值：</strong><a href="/api/Values/Colors">color</a></p></li> <li><p><strong>用法：</strong></p> <p>返回具有给定<a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank" rel="noopener noreferrer">色相、饱和度和亮度<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>和alpha通道的颜色。</p> <p>色调是<code>0deg &lt;= num &lt;= 360deg</code>的一个数字。饱和度和亮度是<code>0% &lt;= num &lt;= 100%</code>的一个数字。所有这些数可能都是<a href="/sass-cn/api/Values/Numbers.html#单位">无单位</a>的。alpha通道可以指定为<code>0 &lt;= num &lt;= 1</code>的一个无单元数，也可以指定为<code>0% &lt;= num &lt;= 100%</code>之间的百分比。</p> <div class="tip custom-block"><p>您可以将诸如<code>calc()</code>或<code>var()</code>这样的<a href="/api/Syntax/Functions">特殊函数</a>传递给<code>hsl()</code>来代替任何参数。您甚至可以使用<code>var()</code>来代替多个参数，因为它可能被多个值替换！当以这种方式调用颜色函数时，它将使用与调用时相同的方法返回未引用的字符串。</p></div> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@debug</span> <span class="token function">hsl</span><span class="token punctuation">(</span>210deg 100% 20% <span class="token operator">/</span> <span class="token function">var</span><span class="token punctuation">(</span>--opacity<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// hsl(210deg 100% 20% / var(--opacity))</span>
<span class="token keyword">@debug</span> <span class="token function">hsla</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--peach<span class="token punctuation">)</span><span class="token punctuation">,</span> 20%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// hsla(var(--peach), 20%)</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@debug</span> hsl(210deg 100% 20% / var(--opacity))  // hsl(210deg 100% 20% / var(--opacity))</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> hsla(var(--peach), 20%)  // hsla(var(--peach), 20%)</span>
</code></pre></div></div></div></div> <div class="warning custom-block"><p>Sass对<a href="/sass-cn/api/Operators/Numeric.html#除法运算">斜杠分隔值</a>的特殊解析规则使得在使用<code>hsl($hue $saturation $lightness / $alpha)</code>方法时，很难传递<code>$lightness</code>或<code>$alpha</code>的变量。考虑使用<code>hsl($hue, $saturation, $lightness, $alpha)</code>代替。</p></div> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@debug</span> <span class="token function">hsl</span><span class="token punctuation">(</span>210deg 100% 20%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// #036</span>
<span class="token keyword">@debug</span> <span class="token function">hsl</span><span class="token punctuation">(</span>34<span class="token punctuation">,</span> 35%<span class="token punctuation">,</span> 92%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// #f2ece4</span>
<span class="token keyword">@debug</span> <span class="token function">hsl</span><span class="token punctuation">(</span>210deg 100% 20% <span class="token operator">/</span> 50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// rgba(0, 51, 102, 0.5)</span>
<span class="token keyword">@debug</span> <span class="token function">hsla</span><span class="token punctuation">(</span>34<span class="token punctuation">,</span> 35%<span class="token punctuation">,</span> 92%<span class="token punctuation">,</span> 0.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// rgba(242, 236, 228, 0.2)</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@debug</span> hsl(210deg 100% 20%) // #036</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> hsl(34, 35%, 92%) // #f2ece4</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> hsl(210deg 100% 20% / 50%)  // rgba(0, 51, 102, 0.5)</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> hsla(34, 35%, 92%, 0.2)  // rgba(242, 236, 228, 0.2)</span>
</code></pre></div></div></div></div></li> <li><p><strong>其它</strong></p> <div role="tablist" aria-multiselectable="true" class="el-collapse"><div class="el-collapse-item"><div role="tab" aria-controls="el-collapse-content-1308" aria-describedby="el-collapse-content-1308"><div role="button" id="el-collapse-head-1308" tabindex="0" class="el-collapse-item__header">兼容性（Level 4 Syntax）<i class="el-collapse-item__arrow el-icon-arrow-right"></i></div></div><div role="tabpanel" aria-hidden="true" aria-labelledby="el-collapse-head-1308" id="el-collapse-content-1308" class="el-collapse-item__wrap" style="display:none;"><div class="el-collapse-item__content"><p>Dart Sass <span class="badge tip" style="vertical-align:middle;" data-v-0f036736>1.15.0+</span> <span class="sa-ver-divider">|</span>LibSass  ✗<span class="sa-ver-divider">|</span>Ruby Sass  ✗</p> <p>LibSass和Ruby Sass只支持以下方法：</p> <ul><li><code>hsl($hue, $saturation, $lightness)</code></li> <li><code>hsla($hue, $saturation, $lightness, $alpha)</code></li></ul> <p>注意，对于这些实现，如果使用函数名<code>hsla()</code>，则需要<code>$alpha</code>参数；如果使用函数名<code>hsl()</code>，则禁止使用<code>$alpha</code>参数。</p></div></div></div> <div class="el-collapse-item"><div role="tab" aria-controls="el-collapse-content-2721" aria-describedby="el-collapse-content-2721"><div role="button" id="el-collapse-head-2721" tabindex="0" class="el-collapse-item__header">兼容性（Percent Alpha）<i class="el-collapse-item__arrow el-icon-arrow-right"></i></div></div><div role="tabpanel" aria-hidden="true" aria-labelledby="el-collapse-head-2721" id="el-collapse-content-2721" class="el-collapse-item__wrap" style="display:none;"><div class="el-collapse-item__content"><p>Dart Sass ✓ <span class="sa-ver-divider">|</span>LibSass  ✗<span class="sa-ver-divider">|</span>Ruby Sass  <span class="badge tip" style="vertical-align:middle;" data-v-0f036736>3.7.0+</span></p> <p>LibSass和旧版本的Ruby Sass不支持按百分比指定的alpha值。</p></div></div></div></div></li></ul> <h3 id="if-condition-if-true-if-false"><a href="#if-condition-if-true-if-false" aria-hidden="true" class="header-anchor">#</a> if($condition, $if-true, $if-false)</h3> <ul><li><p><strong>返回值：</strong><a href="/api/Values/Booleans">boolean</a></p></li> <li><p><strong>用法：</strong></p> <p>这个函数的特殊之处在于，它甚至不计算未返回的参数的值，所以即使未使用的参数会抛出错误，调用它也是安全的。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@debug</span> <span class="token function">if</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">,</span> 10px<span class="token punctuation">,</span> 15px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 10px</span>
<span class="token keyword">@debug</span> <span class="token function">if</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">,</span> 10px<span class="token punctuation">,</span> 15px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 15px</span>
<span class="token keyword">@debug</span> <span class="token function">if</span><span class="token punctuation">(</span><span class="token function">variable-defined</span><span class="token punctuation">(</span><span class="token variable">$var</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token variable">$var</span><span class="token punctuation">,</span> <span class="token null keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// null</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@debug</span> if(true, 10px, 15px)  // 10px</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> if(false, 10px, 15px)  // 15px</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> if(variable-defined($var), $var, null)  // null</span>
</code></pre></div></div></div></div></li></ul> <h3 id="rgb"><a href="#rgb" aria-hidden="true" class="header-anchor">#</a> rgb</h3> <ul><li><p><strong>包含函数：</strong></p> <ul><li><code>rgb($red $green $blue)</code></li> <li><code>rgb($red $green $blue / $alpha)</code></li> <li><code>rgb($red, $green, $blue, $alpha: 1)</code></li> <li><code>rgb($color, $alpha)</code></li> <li><code>rgba($red $green $blue)</code></li> <li><code>rgba($red $green $blue / $alpha)</code></li> <li><code>rgba($red, $green, $blue, $alpha: 1)</code></li> <li><code>rgba($color, $alpha)</code></li></ul></li> <li><p><strong>返回值：</strong><a href="/api/Values/Colors">color</a></p></li> <li><p><strong>用法：</strong></p> <p>如果传递了<code>$red、$green、$blue</code>和可选的<code>$alpha</code>，则返回具有给定的红色、绿色、蓝色和alpha通道的颜色。</p> <p>每个颜色通道可以指定为0到255之间的<a href="/sass-cn/api/Values/Numbers.html#单位">无单位数字</a>（包括0、255），或<code>0%</code>到<code>100%</code>之间的百分比（包括0%、100%）。alpha通道可以指定为0到1之间的无单位数字（包括0、1），也可以指定为<code>0%</code>到<code>100%</code>之间的百分比（包括0%、100%）。</p> <div class="tip custom-block"><p>您可以将诸如<code>calc()</code>或<code>var()</code>这样的<a href="/api/Syntax/Functions">特殊函数</a>传递给<code>rgb()</code>来代替任何参数。您甚至可以使用<code>var()</code>来代替多个参数，因为它可能被多个值替换！当以这种方式调用颜色函数时，它将使用与调用时相同的方法返回未引用的字符串。</p></div> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@debug</span> <span class="token function">rgb</span><span class="token punctuation">(</span>0 51 102 <span class="token operator">/</span> <span class="token function">var</span><span class="token punctuation">(</span>--opacity<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// rgb(0 51 102 / var(--opacity))</span>
<span class="token keyword">@debug</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--peach<span class="token punctuation">)</span><span class="token punctuation">,</span> 0.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// rgba(var(--peach), 0.2)</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@debug</span> rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> rgba(var(--peach), 0.2); // rgba(var(--peach), 0.2)</span>
</code></pre></div></div></div></div> <div class="warning custom-block"><p>Sass对<a href="/sass-cn/api/Operators/Numeric.html#除法运算">斜杠分隔值</a>的特殊解析规则使得在使用<code>rgb($red $green $blue / $alpha)</code>方法时，很难传递<code>$blue</code>或<code>$alpha</code>的变量。考虑使用<code>rgb($red, $green, $blue, $alpha)</code>代替。</p></div> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@debug</span> <span class="token function">rgb</span><span class="token punctuation">(</span>0 51 102<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// #036</span>
<span class="token keyword">@debug</span> <span class="token function">rgb</span><span class="token punctuation">(</span>95%<span class="token punctuation">,</span> 92.5%<span class="token punctuation">,</span> 89.5%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// #f2ece4</span>
<span class="token keyword">@debug</span> <span class="token function">rgb</span><span class="token punctuation">(</span>0 51 102 <span class="token operator">/</span> 50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// rgba(0, 51, 102, 0.5)</span>
<span class="token keyword">@debug</span> <span class="token function">rgba</span><span class="token punctuation">(</span>95%<span class="token punctuation">,</span> 92.5%<span class="token punctuation">,</span> 89.5%<span class="token punctuation">,</span> 0.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// rgba(242, 236, 228, 0.2)</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@debug</span> rgb(0 51 102)  // #036</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> rgb(95%, 92.5%, 89.5%)  // #f2ece4</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> rgb(0 51 102 / 50%)  // rgba(0, 51, 102, 0.5)</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> rgba(95%, 92.5%, 89.5%, 0.2)  // rgba(242, 236, 228, 0.2)</span>
</code></pre></div></div></div></div> <p>如果传递了<code>$color</code>和<code>$alpha</code>，将返回带有给定<code>$alpha</code>通道的<code>$color</code>，而不是初始的$alpha通道值。</p> <div class="el-tabs el-tabs--top el-tabs--border-card"><div class="el-tabs__header is-top"><div class="el-tabs__nav-wrap is-top"><div class="el-tabs__nav-scroll"><div role="tablist" class="el-tabs__nav is-top" style="transform:translateX(-0px);"></div></div></div></div><div class="el-tabs__content"><div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@debug</span> <span class="token function">rgb</span><span class="token punctuation">(</span>0 51 102<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// #036</span>
<span class="token keyword">@debug</span> <span class="token function">rgb</span><span class="token punctuation">(</span>95%<span class="token punctuation">,</span> 92.5%<span class="token punctuation">,</span> 89.5%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// #f2ece4</span>
<span class="token keyword">@debug</span> <span class="token function">rgb</span><span class="token punctuation">(</span>0 51 102 <span class="token operator">/</span> 50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// rgba(0, 51, 102, 0.5)</span>
<span class="token keyword">@debug</span> <span class="token function">rgba</span><span class="token punctuation">(</span>95%<span class="token punctuation">,</span> 92.5%<span class="token punctuation">,</span> 89.5%<span class="token punctuation">,</span> 0.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// rgba(242, 236, 228, 0.2)</span>
</code></pre></div></div> <div role="tabpanel" aria-hidden="true" id="pane-null" aria-labelledby="tab-null" class="el-tab-pane" style="display:none;"><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@debug</span> rgb(0 51 102)  // #036</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> rgb(95%, 92.5%, 89.5%)  // #f2ece4</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> rgb(0 51 102 / 50%)  // rgba(0, 51, 102, 0.5)</span>
<span class="token atrule-line"><span class="token atrule">@debug</span> rgba(95%, 92.5%, 89.5%, 0.2)  // rgba(242, 236, 228, 0.2)</span>
</code></pre></div></div></div></div></li> <li><p><strong>其它：</strong></p> <div role="tablist" aria-multiselectable="true" class="el-collapse"><div class="el-collapse-item"><div role="tab" aria-controls="el-collapse-content-5694" aria-describedby="el-collapse-content-5694"><div role="button" id="el-collapse-head-5694" tabindex="0" class="el-collapse-item__header">兼容性（Level 4 Syntax）<i class="el-collapse-item__arrow el-icon-arrow-right"></i></div></div><div role="tabpanel" aria-hidden="true" aria-labelledby="el-collapse-head-5694" id="el-collapse-content-5694" class="el-collapse-item__wrap" style="display:none;"><div class="el-collapse-item__content"><p>Dart Sass <span class="badge tip" style="vertical-align:middle;" data-v-0f036736>1.15.0+</span> <span class="sa-ver-divider">|</span>LibSass  ✗<span class="sa-ver-divider">|</span>Ruby Sass  ✗</p> <p>LibSass和Ruby Sass只支持以下方法：</p> <ul><li><code>rgb($red, $green, $blue)</code></li> <li><code>rgba($red, $green, $blue, $alpha)</code></li> <li><code>rgba($color, $alpha)</code></li></ul> <p>注意，对于这些实现，如果使用函数名<code>rgba()</code>，则需要<code>$alpha</code>参数；如果使用函数名<code>rgb()</code>，则禁止使用<code>$alpha</code>参数。</p></div></div></div> <div class="el-collapse-item"><div role="tab" aria-controls="el-collapse-content-5248" aria-describedby="el-collapse-content-5248"><div role="button" id="el-collapse-head-5248" tabindex="0" class="el-collapse-item__header">兼容性（Percent Alpha）<i class="el-collapse-item__arrow el-icon-arrow-right"></i></div></div><div role="tabpanel" aria-hidden="true" aria-labelledby="el-collapse-head-5248" id="el-collapse-content-5248" class="el-collapse-item__wrap" style="display:none;"><div class="el-collapse-item__content"><p>Dart Sass ✓ <span class="sa-ver-divider">|</span>LibSass  ✗<span class="sa-ver-divider">|</span>Ruby Sass  <span class="badge tip" style="vertical-align:middle;" data-v-0f036736>3.7.0+</span></p> <p>LibSass和旧版本的Ruby Sass不支持按百分比指定的alpha值。</p></div></div></div></div></li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新: </span> <span class="time">11/5/2019, 4:49:11 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/sass-cn/api/Operators/Boolean.html" class="prev">
          布尔运算
        </a></span> <span class="next"><a href="/sass-cn/api/Modules/Color.html">
          sass:color
        </a>
        →
      </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/sass-cn/assets/js/app.deb571aa.js" defer></script><script src="/sass-cn/assets/js/layout-layout.f021cffe.js" defer></script><script src="/sass-cn/assets/js/vendors~layout-layout.096dd481.js" defer></script><script src="/sass-cn/assets/js/page-api-modules-readme.725f2037.js" defer></script><script src="/sass-cn/assets/js/87.34d80629.js" defer></script><script src="/sass-cn/assets/js/93.6bc9799b.js" defer></script>
</body>

</html>